<template>
  <div class="password-container">
    <back>
      <template v-slot:navHeaderRight>
        <router-link to="login" class="color-white opacity-40">登录</router-link>
      </template>
    </back>
    <div class="cars-form-ui" >
      <el-form ref="form" :model="form">
        <username :value.sync="form.username" />
        <pw :passwordConfirm="form.passwordConfirm" :value.sync="form.password" />
        <pw-confirm :password="form.password" :value.sync="form.passwordConfirm" />
        <Code :username="form.username" :value.sync="form.code"/>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" class="button-block">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Username from "@/components/account/username";
import Pw from "@/components/account/pw";
import PwConfirm from "@/components/account/pwconfirm";
import Code from "@/components/code";
import sha1 from "sha1";

export default {
  name: "Register",
  components:{Username,Code,Pw,PwConfirm},
  data() {
    return {
      form: {
        username: "",
        code: "",
        password: "",
        passwordConfirm: ""
      }
    }
  },
  methods: {
    onSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.handleRegister()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleRegister() {
      const params = {
        username: this.form.username,
        password: sha1(this.form.password), 
        // 一般来说需要加密的，比如md5,sha1,他们加完密之后不能解密的
        // 后端接收到加密的数据后，又会进行一层加密
        code: this.form.code
      }
      // console.log(params)
      this.$store.dispatch("account/registerAction",params).then((res) => {
        this.$message({type: "success",message: res.message});
        this.$router.push({name: "Login"});
      }).catch((err) => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.password-container {
  padding: 0 30px;
}
</style>